<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        body {
            background-color: #f7f7f7;
        }
        .bg {
            width: 1400px;
            height: 200px;
            float: left;
            position: relative;
            flex-wrap: wrap;
            margin: 200px auto;
        }

        img {
<<<<<<< HEAD
            width: 500px;
            height: 370px;
            float: left;
=======
            width: 300px;
            height: 200px;
>>>>>>> 46e7edbb0db938aa9667185c93e727df48784ae0
        }

        .img {
            width: 100%;
            height: 170px;
            display: flex;
            /* float: left; */
            transition: 0.3s;
        }
        .box {
<<<<<<< HEAD
            width: 500px;
            height:370px;
            margin: 100px auto;
            box-shadow: 0px 0px 20px;
            border-radius: 5px;
            z-index: 999;
            position: relative;
            overflow: hidden;
        }

        .big {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 20%);
=======
            width: 300px;
            height: 200px;
            box-shadow: 0px 0px 20px;
            border: 1px solid black;
            margin-left: 20%;
>>>>>>> 46e7edbb0db938aa9667185c93e727df48784ae0
            float: left;
            overflow: hidden;
            padding: 0;
        }

        .description {
            position: absolute;
            bottom: 10px;
        }

<<<<<<< HEAD
        img {
            /* flex-direction: column; */
            float: left;
=======
        .big {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 20%);
            display: inline-block;
            position: relative;
>>>>>>> 46e7edbb0db938aa9667185c93e727df48784ae0
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="box">
            <div class="img">
                <!-- <img src="./img1.jpg">
                <img src="./img2.jpg">
                <img src="./img3.jpg">
                <img src="./img4.jpg">
<<<<<<< HEAD
                <img src="./img5.jpg">
                <img src="./img1.jpg">
=======
                <img src="./img5.jpg"> -->
>>>>>>> 46e7edbb0db938aa9667185c93e727df48784ae0
                <div class="description">
                    <div class="big"></div>
                    <div class="big"></div>
                    <div class="big"></div>
                    <div class="big"></div>
                    <div class="big"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        let arr = [
            {
                img: './img1.jpg'
            },
            {
                img: './img2.jpg'
            },
            {
                img: './img3.jpg'
            },
            {
                img: './img4.jpg'
            },
            {
                img: './img5.jpg'
            },
        ];
        let box = document.querySelector('.box');
        let big = document.querySelectorAll('.big')
<<<<<<< HEAD
        let img = document.querySelector('.img')
        // for (let i = 0; i < arr.length; i++) {
        //     let img = document.createElement('img');
        //     img.src = arr[i].img;
        //     imgs.appendChild(img);
        // }
=======
        let imgs = document.querySelector('.img')
        for (let i = 0; i < arr.length; i++) {
            let img = document.createElement('img');
            img.src = arr[i].img;
            imgs.appendChild(img);
        }
        let img = document.querySelector('.img');
        start()
>>>>>>> 46e7edbb0db938aa9667185c93e727df48784ae0
        for (let i = 0; i < big.length; i++) {
            big[0].style.background = "#fff";
            big[i].addEventListener('click', function () {
                for (let i = 0; i < big.length; i++) {
                    big[i].style.background = "rgba(0, 0, 0, 20%)";
                }
                this.style.background = "#fff";
            })
<<<<<<< HEAD
        }
        nBox = box
        star()
        function star(){
console.log(box.scrollTop);
console.log(img.offsetHeight);
            setInterval(() => {
                if(box.scrollTop >= img.offsetHeight){
                    box.scrollTop += 1;
=======
        };
        console.log(img.offsetHeight);
        console.log(box.scrollTop);
        function start(){
            let slice = setInterval(() => {
                if(box.scrollTop > img.offsetHeight){
                    box.scrollTop += 1;
                }else{
                    box.scrollTop = 0;
>>>>>>> 46e7edbb0db938aa9667185c93e727df48784ae0
                    
                    // console.log(box.scrollTop);
                }else{
                    box.scrollTop =0;
                    nBox++
                    // console.log(box.scrollTop);
                }
            });
        }
    </script>
</body>

</html>